<template>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="swipe">
        <swipe :imgData="imgData"></swipe>
    </div>
    <van-row  style="padding:0 8px">
		<van-col span="12" v-for="item in gridOptions" :key="item" class="iconIn">
			<van-image
				width="68"
				fit="fill"
				radius="5px"
				height="68"
				:src="item.imgUrl"
			/>
            <span class="iconTitle">{{ item.title}}</span>
		</van-col>
	</van-row>
    <van-row class="cardContent">
        <div class="levelDisplay">
            <p class="cardTitle">健康关怀好文</p>
            <p class="more">更多<van-icon name="arrow" /></p>
        </div>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		<van-cell v-for="item in list" :key="item" :title="item.title" @click="goDetail(JSON.stringify(item))">
			<template #title>
				 <van-row gutter="16">
				   <van-col span="10">
					  <van-image
						  width="100%"
						  fit="fill"
						  radius="4px"
						  height="100%"
						  :src="item.cover"
					  />
				   </van-col>
				   <van-col span="14" class="rightArea">
					  <p class="articleTitle">{{ item.title }}</p>
					  <div class="source">
						  <span>{{ item.author }}</span>
						  &nbsp;
						  <span>{{ typeof(item.addTime) == 'string' ? item.addTime.split(' ')[0] : item.addTime }}</span>
					  </div>
				   </van-col>
				 </van-row>
			</template>
		</van-cell>
	</van-list>
    </van-row>
	

</template>

<script>
    import swipe from '@/components/swipe/swipe.vue'
	import { getArticleList } from '../../request/api/homeApi.js'
	import { Toast } from "vant"

    export default {
        name: 'home',
        components: {
            swipe
        },
        data() {
            return {
                value: '',
				currentPage: 1, // 当前页
				pageSize: 10, // 每页显示14条数据
				total: 30, // 总数
                imgData: [{
                        imgSrc: require('../../assets/banner4.jpg'),
                        method: () => {
                            console.log('图片被点击')
                        }
                    },
                    {
                        imgSrc: require('../../assets/banner1.jpg'),
                        method: () => {
                            console.log('图片被点击')
                        }
                    },
                    {
                        imgSrc: require('../../assets/banner3.jpg'),
                        method: () => {
                            console.log('图片被点击')
                        }
                    },
                    {
                        imgSrc: require('../../assets/banner2.jpg'),
                        method: () => {
                            console.log('图片被点击')
                        }
                    }
                ],
                gridOptions: [
                    {
                        imgUrl: require('../../assets/运动锻炼.png'),
                        title: '运动计划'
                    },
                    {
                        imgUrl: require('../../assets/健康饮食.png'),
                        title: '健康饮食'
                    },
                ],
                list: [],
                loading: false, // 是否处于加载状态
                finished: false, // 是否加载完成
            }
        },
		created() {
			this.articleData()
		},
        methods: {
			// 获取首页文章列表
			articleData() {
                Toast.loading({
                    duration: 0, // 持续展示 toast
                    message: '加载中...',
                    forbidClick: true,
                })
				getArticleList({
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					if (res.data) {
						if (res.data.code == 0) {
                            // 筛选出已审核通过并启用的文章
                            this.list = res.data.articleList.filter(i => i.audit === '1' && i.using === true)
                            // 手动清除 Toast
                            Toast.clear()
						} else {
                            Toast.clear()
                            Toast.fail(res.msg)
                        }
					}
				})
				.catch(err => {
                    Toast.clear()
                    Toast.fail('网络不稳定')
                })
			},
			// 下划分页加载文章
            onLoad() {
				this.currentPage += 1
				getArticleList({
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				.then(res => {
					if (res.data) {
						if (res.data.code == 0) {
							this.list.push(...res.data.articleList)
						}
						this.loading = false
						// 没数据了
						if (res.data.articleList == 0) {
						    this.finished = true
						}
					}
				})
				.catch()
            },
			// 点击详情
			goDetail(data) {
				this.$router.push({name: 'detail', params: {data}})
			}
        }

    }
</script>

<style lang="scss" scoped>
    .swipe {
        height: 220px;
        padding: 0px 0px 10px 0px;
    }
	.rightArea {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.source {
			span {
				font-size: 12px;
				color: #999;
			}
		}
	}
    .iconIn {
        padding: 12px;
        background-color: #fff;
        border-radius: 6px;
        display: flex;
        align-items: center;
    }
    .van-cell {
        padding: 10px 0;
    }
    .iconTitle {
        margin-left: 16px;
        font-size: 18px;
    }
    .cardContent{
        margin-top: 10px;
        padding: 12px;
        background-color: #fff;
    }
    .cardTitle {
        font-size: 16px;
        font-weight: 600;
    }
    .articleTitle{
        font-size: 16px;
        color: #333;
    }
    .levelDisplay {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    .more {
       color: #666;
        font-size: 14px;
    }
</style>
